<template>
  <div class="container">
    <van-search
        :value='val'
        placeholder="点击输入核销员昵称"
        use-action-slot
        @change="onChangeVal"
        @search="onSearch"
        class="search-box"
    >
        <van-button class="search-btn" size="small" slot="action" @tap="onSearch2">搜索</van-button>
    </van-search>
    <div class="main-bar pad-l-15 pad-r-15" :class="{'padding-b':pullLoad.finished}">
      <!-- 循环小块 -->
      <div class="flex flex-between row pad-t-5 pad-b-5" :key="index" v-for="(item,index) in writers">
        <div class="flex flex-between">
          <div class="headshop-box">
            <img class="width-40 height-40" v-if="item.avatar" :src="item.avatar" alt="">
          </div>
          <div class="mar-l-12">
            <span>{{item.nickname}}</span>
          </div>
        </div>
        <div>
          <van-button color="#f94035" size="small" @click="deleteCancellation(item)">解除</van-button>
        </div>
      </div>
      <div class="width-375 nodata-box" v-if="writers.length === 0">
        <img class="width-375 height-200" v-if="fileSpace" :src="fileSpace + '/images/not-data.png'" alt="">
        <div class="font-16 font-w font-color nodata">暂无数据</div>
      </div>
    </div>
    <div class="new-btn-box">
      <div class="new-btn mar-l-15 mar-r-15 flex flex-center" @click="$pt.navigateTo({url:'/pages/home/cancellation-desk/add/main'})">
        <img class="width-15 height-15" v-if="fileSpace" :src="fileSpace + '/images/new-add.png'" alt="">
        <span class="mar-l-8">新增核销员</span>
      </div>
    </div>
    <div class="delete-box">
      <van-dialog
        :message="'是否确认解除【' + deleteNickname + '】的核销员身份？'"
        :show="deleteShow"
        confirmButtonText='确认解除'
        show-cancel-button
        @confirm="deleteConfirm"
        @close="closeDialog"
      >
      </van-dialog>
    </div>  

  </div>
</template> 
<script>
import { pageCancellationManage, cancellationDelete } from '@/api/personal'
export default {
  data() {
    return {
      nickname: '', // 搜索框绑定的值 昵称
      deleteShow: false,
      writers: [], // 核销员列表
      currentPage: 1,
      verifierId: '', // 要解除的核销员的核销ID
      deleteNickname: '', // 要解除的核销员的昵称
      pullLoad: {
        loading: false,
        finished: false
      }
    }
  },
  onShow() {
    this.currentPage = 1
    this.writers = []
    this.pageLoad()
  },
  onReachBottom() {
    console.log('是否触发事件')
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageLoad()
    }
  },
  methods: {
    resetParams() {
      this.pullLoad = {
        loading: false,
        finished: false
      }
      this.currentPage = 1
    },
    onSearch(e) {
      // 键盘的搜索按钮事件
      this.nickname = e.mp.detail
      this.resetParams()
      this.writers = []
      this.pageLoad()
    },
    onChangeVal(e) {
      this.nickname = e.mp.detail
    },
    onSearch2() {
      // 搜索按钮点击事件
      this.resetParams()
      this.writers = []
      this.pageLoad()
    },
    deleteCancellation(item) {
      // 解除核销员按钮点击事件
      this.verifierId = item.verifierId
      this.deleteNickname = item.nickname
      this.deleteShow = true
    },
    closeDialog() {
      // 关闭弹出框
      this.deleteShow = false
    },
    deleteConfirm() {
      // 确认删除事件
      this.deleteShow = false
      cancellationDelete({verifierId: this.verifierId}).then((response) => {
        if (response.isError) return
        let index = this.writers.findIndex(item => {
          return item.verifierId === this.verifierId
        })
        this.writers.splice(index, 1)
        this.$utils.showToast({ title: '成功解除核销员!' })
      }).catch(() => {
      })
    },
    pageLoad() {
      // 页面加载
      const params = {
        memberId: this.getCustomerId,
        nickname: this.nickname,
        currentPage: this.currentPage,
        size: 15
      }
      pageCancellationManage(params).then((response) => {
        if (response.isError) return
        response.data.records.forEach(item => {
          this.writers.push(item)
        })
        this.currentPage++
        if (this.writers.length === 0 || this.writers.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.container{
    background: white;
    min-height: 100vh;
}
.search-btn /deep/ .van-button--small{
    color: white;
    background: #333333;
    border-radius: 4px;
    margin-left: -5px;
    border: unset;
    // height: 30px;
    // line-height: 28px;
}
.search-box /deep/ .van-search__action{
    padding: 0 15px 0 0;
    line-height: unset;
}
.main-bar{
  .row{
    border-bottom: 1px solid #ededed;
    min-height: 50px;
    .headshop-box{
      img{
        border-radius: 50%;
      }
    }
    /deep/ .van-button--small{
      background-color: #f94035;
      color: white;
      min-width: 60px;
      border-radius: 3px;
      &::after{
        border: unset;
      }
    }
  }
  .nodata-box{
    margin-top: 88px;
    .nodata{
      margin-top: -32px;
      text-align: center;
    }
  }
}
.padding-b{
  padding-bottom: 75px;
}
.new-btn-box{
  position: fixed;
  left: 0;
  bottom: 12px;
  width: 100%;
  .new-btn{
    border-radius: 20px;
    background-color: #f8c400;
    color: #333333;
    font-size: 15px;
    padding: 12px 0;
    &::after{
      border: unset;
    }
  }
}

  .delete-box {
    /deep/ .dialog-index--van-dialog__confirm{
      background: #f94035;
      color: white !important;
    }
    /deep/ .dialog-index--van-dialog{
      width: 75%;
    }
    /deep/ .van-dialog__message{
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
  } 
  


</style>
